<!-- home -->
<template>
  <div class="page-box index-container">
    <h1 class="demo-home__title"><span> Vant h5页面模板</span></h1>
    <p class="tips">Vant 轻量、可靠的移动端 Vue 组件库</p>
    <h2 class="label">特性</h2>
    <van-cell icon="success" v-for="item in list" :key="item" :title="item" />
    <p class="api">vant 官网api</p>
    <a class="link" href="https://vant-contrib.gitee.io/vant/#/zh-CN/home">https://vant-contrib.gitee.io/vant/#/zh-CN/home</a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        '60+ 高质量组件',
        '90% 单元测试覆盖率',
        '完善的中英文文档和示例',
        '支持按需引入',
        '支持主题定制',
        '支持国际化',
        '支持 TS',
        '支持 SSR'
      ]
    }
  },

  computed: {},

  mounted() { },

  methods: {}
}
</script>
<style lang="less" scoped>
.index-container {
  padding: 12px;
  background: #fff;
  .demo-home__title {
    margin: 0 0 6px;
    font-size: 32px;
    .demo-home__title img,
    .demo-home__title span {
      display: inline-block;
      vertical-align: middle;
    }
    img {
      position: relative;
      top: 6px;
      width: 32px;
    }
    span {
      margin-left: 16px;
      font-weight: 500;
    }
  }
  .demo-home__desc {
    margin: 0 0 20px;
    color: rgba(69, 90, 100, 0.6);
    font-size: 14px;
  }
  .tips {
    margin-top: 20px;
    text-align: center;
    font-size: 14px;
  }
  .label {
    margin-top: 20px;
    color: #666;
    font-size: 16px;
  }
  .api {
    margin: 20px 10px 10px;
    font-size: 14px;
  }
  .link {
    margin-left: 10px;
  }
}
</style>
